<template>
	<el-card class="update">
		<el-form :model="order" :rules="rules" ref="order" label-width="100px" class="demo-ruleForm">
			<el-form-item label="订单编号:" prop="orderNumber" readonly>
				<el-input v-model="order.orderNumber" :readonly="true"></el-input>
			</el-form-item>
			<el-form-item label="订单出价:" prop="bid" readonly>
				<el-input v-model="order.bid"></el-input>
			</el-form-item>
			<el-form-item label="商品:">
				<el-select v-model="order.commodityId" placeholder="请选择商品" style="width: 355px;">
					<el-option v-for="(item,index) in cmsCommodity" v-bind:key="index" :label="item.name"
						:value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="订单单价:" prop="unitPrice" readonly>
				<el-input v-model="order.unitPrice"></el-input>
			</el-form-item>
			<el-form-item label="订单数量:" prop="orderQuantity" readonly>
				<el-input v-model="order.orderQuantity"></el-input>
			</el-form-item>
			<el-form-item label="订单金额:" prop="orderAmount" readonly>
				<el-input v-model="order.orderAmount"></el-input>
			</el-form-item>
			<el-form-item label="订单状态:">
				<el-select v-model="order.orderStatus" placeholder="请选择状态" style="width: 355px;">
					<el-option v-for="(item,index) in options" v-bind:key="index" :label="item.label"
						:value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="合作码:" prop="cooperativeCode" readonly>
				<el-input v-model="order.cooperativeCode"></el-input>
			</el-form-item>
			<el-form-item label="抖音号:" prop="tiktok" readonly>
				<el-input v-model="order.tiktok"></el-input>
			</el-form-item>
			<el-form-item label="主页链接:" prop="homeLink" readonly>
				<el-input v-model="order.homeLink"></el-input>
			</el-form-item>
			<el-form-item label="用户名称:" prop="userName" readonly>
				<el-input v-model="order.userName"></el-input>
			</el-form-item>
			<el-form-item label="备注:" prop="orderRemark" readonly>
				<el-input v-model="order.orderRemark"></el-input>
			</el-form-item>
			<el-form-item label="标题:" prop="headline" readonly>
				<el-input v-model="order.headline"></el-input>
			</el-form-item>
			<el-form-item label="投手:">
				<el-select v-model="order.pitcherId" placeholder="请选择投手" style="width: 355px;">
					<el-option v-for="(item,index) in umsPitcher" v-bind:key="index" :label="item.number"
						:value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="标签:">
				<el-select v-model="order.tagId" placeholder="请选择标签" style="width: 355px;">
					<el-option v-for="(item,index) in tags" v-bind:key="index" :label="item.name"
						:value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="updateById()">修改</el-button>
				<el-button @click="list()">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
	export default {
		data() {
			return {
				order: {},
				cmsCommodity: [],
				options: [{
						label: "已付款",
						value: 1
					},
					{
						label: "待处理",
						value: 2
					},
					{
						label: "处理中",
						value: 3
					},
					{
						label: "补单中",
						value: 4
					},
					{
						label: "退单中",
						value: 5
					},
					{
						label: "已完成",
						value: 6
					},
					{
						label: "已退单",
						value: 7
					},
					{
						label: "已退款",
						value: 8
					},
					{
						label: "有异常",
						value: 9
					}
				],
				rules: {
					name: [{
							required: true,
							message: '请输入活动名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					region: [{
						required: true,
						message: '请选择活动区域',
						trigger: 'change'
					}],
					date1: [{
						type: 'date',
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					date2: [{
						type: 'date',
						required: true,
						message: '请选择时间',
						trigger: 'change'
					}],
					type: [{
						type: 'array',
						required: true,
						message: '请至少选择一个活动性质',
						trigger: 'change'
					}],
					resource: [{
						required: true,
						message: '请选择活动资源',
						trigger: 'change'
					}],
					desc: [{
						required: true,
						message: '请填写活动形式',
						trigger: 'blur'
					}]
				},
				umsPitcher: [],
				tags:[]
			};
		},
		created() {
			this.list();
		},
		methods: {
			updateById() {
				console.log(this.order)
				this.$axios.post('omsOrder/updateGetId', {
					...this.order
				}, {
					headers: {
						'Content-Type': 'application/json'
					}
				}).then((res) => {
					if (res.data) {
						this.$router.go(-1);
						this.$message({
							message: '修改成功',
							type: 'success'
						});
					}
				})
			},
			list() {
				
				this.id = this.$route.query.orderId;
				
				let than = this
				this.$axios.post('tags/list').then((res) => {
					than.tags = res.data;
					console.log("tage:" + than.tags)
				})
				this.$axios.post('umsPitcher/list').then((res) => {
					than.umsPitcher = res.data;
				});
				this.$axios.post('omsOrder/getone/' + this.id).then((res) => {
					than.order = res.data;
					console.log(than.order);
				});
				this.$axios.post('cmsCommodity/select').then((res) => {
					than.cmsCommodity = res.data;
					console.log(than.cmsCommodity);
				});
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style>
	.update {
		margin: auto;
		width: 500px;
		height: auto;
	}
</style>